<template>
  <!-- 单条主变或者馈线的调节资源 -->
  <div class="main-container" style="display: flex; width: 1844px; margin: 0 auto">
    <el-dialog title="" :visible.sync="wangcedialogVisible" width="70%">
      <div @click="handleClickzg(1)"
        style="color: #0c7673;font-weight: 600;font-size: 16px;cursor: pointer; margin-bottom: 10px;">
        转供方案
      </div>

      <div v-if="ZGtype == 1" class="wangceDialgo" style="height: 500px;margin-top: 10px">
        <el-table :cell-style="{ border: '1px solid #0C8F96', height: '35px' }" :header-cell-style="{
          'border-radius': 0,
          border: '1px solid #0C8F96',
          'background-color': 'rgba(117,215,225,0.2)',
          'text-align': 'center',
          'font-size': '16px',
          color: '#17274A',
          'font-weight': 'bold',
        }" :data="wangceTableData" max-height="450px" border style="width: 100%">
          <el-table-column type="index" align="center" label="序号">
          </el-table-column>
          <el-table-column prop="closeCheck" align="center" label="合环校验">
          </el-table-column>
          <el-table-column prop="close_cbname" align="center" label="控合开关">
          </el-table-column>
          <el-table-column prop="open_cbname" align="center" label="控分开关">
          </el-table-column>
          <el-table-column prop="ovevalue" align="center" label="越限量">
          </el-table-column>
          <el-table-column prop="p_load" align="center" label="计算调节功率">
          </el-table-column>
          <el-table-column prop="p_load" align="center" label="实际调节功率">
          </el-table-column>
          <el-table-column prop="reserve_string3" align="center" label="方案描述">
          </el-table-column>

          <el-table-column prop="reserve_string3" align="center" label="转供图">
            <template slot-scope="scope">
              <el-button @click="handleClickzg(2)" type="primary" size="mini" round>转供成图</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- </el-tab-pane> -->


      <el-tabs v-if="ZGtype == 2" type="card" v-model="activeName2">
        <el-tab-pane label="转供前" name="first2">
          <iframe :src="zhuwangSRC" frameborder="0" width="100%" height="700px"></iframe>
        </el-tab-pane>
        <el-tab-pane label="转供后" name="second2">
          <iframe :src="peiwangSRC" frameborder="0" width="100%" height="700px"></iframe>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>

    <el-dialog title="" :visible.sync="chuNendialogVisible" width="60%">
      <div class="chuNendialogEcharts" ref="chuNendialogEchartsRef" style="height: 500px;margin-top: 10px;">
      </div>
    </el-dialog>

    <el-dialog title="" :visible.sync="jitaidialogVisible" width="60%">
      <div style="width: 100%; text-align: center;font-size:18px;font-weight: 600;">
        {{ myName_zi }} 预测曲线
      </div>
      <div class="jitaidialogEcharts" ref="jitaidialogEchartsRef" style="height: 500px;margin-top: 10px;">
      </div>
    </el-dialog>



    <div class="outDiaBox" v-if="dialogTableVisible">

      <div class="inBox" v-if="mytype_text !== '纯负荷'">
        <img class="img" @click="dialogTableVisible = false" src="./policyImg/close.png" alt="">
        <div class="title">资源单体详情</div>
        <div class="tabBox">
          <el-table @row-click="clickTableLine" :cell-style="{ border: '1px solid #0C8F96', height: '35px' }"
            :header-cell-style="{
              'border-radius': 0,
              border: '1px solid #0C8F96',
              'background-color': 'rgba(117,215,225,0.2)',
              'text-align': 'center',
              'font-size': '16px',
              color: '#17274A',
              'font-weight': 'bold',
            }" :data="tableData" max-height="110px" border style="width: 100%">
            <el-table-column prop="name" align="center" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="meritorious" align="center" label="有功" width="180">
            </el-table-column>
            <el-table-column prop="capacity" align="center" label="容量">
            </el-table-column>
            <el-table-column v-if="downAD == '上调能力'" prop="margin_up" align="center" :label="downAD">
            </el-table-column>

            <el-table-column prop="margin_down" v-else align="center" :label="downAD">
            </el-table-column>
            <el-table-column prop="gridConnectedEquipment" align="center" label="并网设备">
            </el-table-column>
          </el-table>
        </div>

        <div class="title2box">
          {{ downAD }}曲线
        </div>
        <div class="diaLogEchart" ref="diaLogEcharRef"></div>

      </div>

      <div class="inBox" v-else>
        <img class="img" @click="dialogTableVisible = false" src="./policyImg/close.png" alt="">
        <div class="title">{{ downAD }}曲线</div>
        <div style="height: 100%;" class="diaLogEchart" ref="diaLogEcharRef"></div>
      </div>
    </div>

    <div class="container_left">
      <div class="title">
        <div class="top">
          <div class="left">
            <div class="img"></div>
            <div>{{ myName_zi }}</div>
          </div>
          <div class="center">
            <div> 越限类型: </div>
            <div v-if="yxType == 1" class="img2">反向</div>
            <div v-else class="img3">正向</div>
          </div>
          <div v-if="!is_useTimeLine" class="right">
            {{ requestParams.over_time }}
          </div>
          <div v-else class="right">
            {{ requestParams.over_time.slice(0, 10) + " " + this.timeNow + ":" + "00" }}
          </div>

        </div>
        <div class="bottom">
          <div class="left">
            <div>越限量:

              <span v-if="!is_useTimeLine" style="color: #0c7673">{{ YXL_XE0 < 0 ? 0 : YXL_XE0 }}</span>
                  <span v-else style="color: #0c7673">{{ YXL_XE < 0 ? 0 : YXL_XE }}</span>
            </div>
            <div style="width: 222px;">最大值: <span style="color: red">{{ requestParams.dev_p }}</span></div>
            <div>限值: <span style="color: #0c7673">{{ requestParams.dev_se }}</span></div>

            <div>门槛: <span style="color: #0c7673">{{ MENKAN }}</span></div>
         

            <div class="fuzai">负载率:<el-progress width="180" :percentage="timeString / requestParams.dev_se * 100"
                status="exception" :color="timeString / requestParams.dev_se * 100 >= 100
                  ? '#ed4646'
                  : timeString / requestParams.dev_se * 100 >= 85 && timeString / requestParams.dev_se * 100 < 100
                    ? '#d3ba58'
                    : '#d3ba58'
                  "></el-progress>
              <div class="lv">{{ (timeString / requestParams.dev_se * 100).toFixed(2) }}%</div>
            </div>

          </div>
          <div class="right" @click="jumpBus">
          </div>
        </div>
      </div>

      <div :class="['content', Yx_TYpe == '馈线' ? 'contentKx' : '']">
        <div class="text">
          {{ myName_zi }}
          <span v-if="!is_useTimeLine" style='color: red; font-size: 18px;margin-left: 20px;'>{{ timeString2 }}</span>

          <span v-else style='color: red; font-size: 18px;margin-left: 20px;'>{{ timeString }}</span>
        </div>

        <div class="line">
        </div>
      </div>

      <div class="content2">
        <div class="small" v-for="it in lineImgData" :key="it.name" @click="openDialogEvt(it)">
          <div class="small_Line">
          </div>

          <!-- <img :src="require('@/assets/images/' + item.img + '.png')" /> -->
          <img v-if="it.text == '纯负荷'" src="./policyImg/cfh.png" alt="">
          <img v-if="it.text == '储能'" src="./policyImg/cn.png" alt="">
          <img v-if="it.text == '非统调常规'" src="./policyImg/ftdcg.png" alt="">
          <img v-if="it.text == '统调小机'" src="./policyImg/tdxj.png" alt="">
          <img v-if="it.text == '集中式分布'" src="./policyImg/jzsfb.png" alt="">
          <img v-if="it.text == '分布式光伏'" src="./policyImg/fbsgf.png" alt="">
          <img v-if="it.text == '可调负荷'" src="./policyImg/ktfh.png" alt="">
          <img v-if="it.text == '虚拟电厂'" src="./policyImg/xndc.png" alt="">
          <img v-if="it.text == '微电网'" src="./policyImg/wdw.png" alt="">
          <div class="text">{{ it.text }}</div>
          <div class="num">{{ it.num }}</div>
        </div>
      </div>

      <div class="bottomLine">
        <div v-for="it in timeLineData" :key="it.time" class="greyBox">
          <div :class="['boll', it.type == 2 ? 'boll2' : '', it.type == 3 ? 'boll3' : '']">
            <div class="cnBoll">
            </div>
          </div>
          <div class="time" slot="reference">{{ it.time }}</div>
        </div>

        <template>
          <el-slider class="myslider" @input="handleSliderInput" @change="handleSliderChange" v-model="sliderValue"
            :min="min" :max="max" :show-tooltip="false"></el-slider>
          <div class="mytooltip" v-if="showCustomTooltip" :style="{ left: customTooltipTop }">
            {{ customTooltipText }}
          </div>
        </template>

      </div>

    </div>
    <div class="container_right">
      <div class="top">
        <span class="title">调整策略</span>
        <div class="tzcl">
          <div class="head">

            <div style="margin-left:-1px">理论调节能力</div>

            <div style="margin-left:-1px">调节需求</div>
            <!-- <div style="margin-left: 5px">计算调节量</div> -->
            <div style="margin-right: 38px">日前安排</div>
          </div>
          <div class="body">
            <div class="conten_line">
              <div class="leftBox"> 网侧调整 </div>

              <div class="arrBox">
              </div>

              <div class="danHang">
                <div class="conBox">

                  <div @click="openFhdialog" style="color: #0c7673; text-indent: 15px; cursor: pointer;">负荷转供</div>
                  <div style="text-indent: 15px;">{{ AdjustPolicy[0].num }}</div>
                  <div style="text-indent: 15px;">{{ AdjustPolicy[0].num1 }}</div>
                  <!-- <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[0].num3 }}</div> -->
                  <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[0].num2 }}</div>
                </div>
              </div>
            </div>
            <div class="xxArray">
            </div>
            <div class="conten_line">
              <div class="leftBox"> 储能调整 </div>
              <div class="arrBox">
              </div>
              <div class="danHang">
                <div class="conBox">
                  <div @click="openCnDialogEvt(1)" style="color: #0c7673; text-indent: 15px;cursor: pointer;">储能调整</div>
                  <div style="text-indent: 15px;">{{ AdjustPolicy[1].num }}</div>
                  <div style="text-indent: 15px;">{{ AdjustPolicy[1].num1 }}</div>
                  <!-- <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[1].num3 }}</div> -->
                  <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[1].num2 }}</div>
                </div>
              </div>
            </div>
            <div class="xxArray">
            </div>

            <div class="conten_line">
              <div class="leftBox"> 电源调整 </div>
              <div class="arrBox">
              </div>
              <div class="danHang danHang2">
                <div class="conBox">
                  <div style="color: #0c7673; text-indent: 15px;">非统调电源</div>
                  <div style="text-indent: 15px;">{{ AdjustPolicy[2].list[0].num }}</div>

                  <div style="text-indent: 15px;">{{ AdjustPolicy[2].list[0].num1 }}</div>
                  <!-- <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[2].list[0].num3 }}</div> -->
                  <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[2].list[0].num2 }}</div>
                </div>
                <div class="conBox">
                  <div style="color: #0c7673; text-indent: 15px;">统调电源</div>
                  <div style="text-indent: 15px;">{{ AdjustPolicy[2].list[1].num }}</div>
                  <div style="text-indent: 15px;">{{ AdjustPolicy[2].list[1].num1 }}</div>
                  <!-- <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[2].list[1].num3 }}</div> -->
                  <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[2].list[1].num2 }} </div>
                </div>
              </div>
            </div>
            <div class="xxArray">
            </div>

            <div class="conten_line">
              <div class="leftBox"> 负荷侧调整 </div>
              <div class="arrBox">
              </div>
              <div class="danHang danHang3">
                <div class="conBox">
                  <div @click="openCnDialogEvt(2)" style="color: #0c7673; text-indent: 15px;cursor: pointer;">可调负荷调整
                  </div>
                  <div style="text-indent: 15px;">{{ AdjustPolicy[3].list[0].num }}</div>

                  <div style="text-indent: 15px;">{{ AdjustPolicy[3].list[0].num1 }}</div>
                  <!-- <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[3].list[0].num3 }}</div> -->
                  <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[3].list[0].num2 }}</div>
                </div>
                <div class="conBox">
                  <div @click="openCnDialogEvt(3)" style="color: #0c7673; text-indent: 15px;cursor: pointer;">虚拟电厂调整
                  </div>
                  <div style="text-indent: 15px;">{{ AdjustPolicy[3].list[1].num }}</div>
                  <div style="text-indent: 15px;">{{ AdjustPolicy[3].list[1].num1 }}</div>
                  <!-- <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[3].list[1].num3 }}</div> -->
                  <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[3].list[1].num2 }}</div>
                </div>
                <div class="conBox">
                  <div style="color: #0c7673; text-indent: 15px;">微电网调整</div>
                  <div style="text-indent: 15px;">{{ AdjustPolicy[3].list[2].num }}</div>
                  <div style="text-indent: 15px;">{{ AdjustPolicy[3].list[2].num1 }}</div>
                  <!-- <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[3].list[2].num3 }}</div> -->
                  <div style="color: orange;text-indent: 28px;">{{ AdjustPolicy[3].list[2].num2 }}</div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="title">平衡调整结果</div>
        <div id="phtzxg" ref="phtzxg"></div>
      </div>
    </div>
  </div>
</template>

<!-- <img :src="require('@/assets/images/' + item.img + '.png')" /> -->
<!-- { text: "设备正向过载", img: "forwardload" },
{ text: "设备反向过载", img: "reverseload" }, -->
<script>
import {
  dtyx_analysisAdjustmentStrategy,
  dtyx_adjustmentStrategy,
  netSideAdjust,
  dtyx_timeAxis,
  dtyx_strategy,
  dtyx_structuralDiagram,
  dtyx_structuralDiagramByTime,
  resourceUnitDetail,
  resourceUnitDiagram
} from "@/api/index";
import * as echarts from "echarts";
import homeMap from "@/utils/home/home.map";
import mock from "@/utils/home/home.mockdata.js";
import mapJson from "@/utils/home/mapJson/jiangsu.json";
export default {
  name: "province2",
  data() {
    return {
      min: 0,
      max: 95, //00:00-23:45
      MENKAN:0,
      sliderValue: 0,
      customTooltipTop: "0%",
      showCustomTooltip: false,
      phyjShowDate: true,
      // showCustomTooltip: true,

      downAD: '下调能力',
      is_useTimeLine: false,

      zhuwangSRC: '',
      ZWONE: 'http://njssjk.i2cc.nj.dc.sgcc.com.cn:7088/osp/GraphPub/Navigator.html?graph=path_',
      ZWTWO: '131132010000000127',
      peiwangSRC: '',

      PEIWANGONE: 'http://njssjk.i2cc.nj.dc.sgcc.com.cn:7088/osp/GraphPub/Navigator.html?graph=path_',
      PEIWANGTWO: '131132010000000127',

      ALLUSE: '.auto.pic.g;toolbarshow=0;menubarshow=0;isReload=1;tpColorType=0;',

      Yx_TYpe: '',
      adParams: {
        deviceId: "",
      },

      dtxqParams: {
        id: '',
        type: '',
        isNowday: true,
        time: '',
      },
      dtqxParams: {
        curve_type: '2',
        id: '',
        type: '',

      },
      YXL_XE0: 0,

      YXL_XE: 0,


      tjqvParams: {
        id: '',
        resource_type: 1
      },
      yxType: 0,
      timeNow: '',
      timeString: '', // 
      timeString2: '',
      wangcedialogVisible: false,
      chuNendialogVisible: false,
      jitaidialogVisible: false,
      myName_zi: '',
      numnumnum: 30,
      activeName: "first",
      activeName2: "first2",
      requestParams: {
        dev_id: '',
        dev_name: '',
        dev_p: '',
        dev_se: '',
        dev_rate: '',
        over_type: '',
        over_time: '',
      },
      wangceTableData: [{
        date: '通过',
        name: '10kV花邦线111-O6 24',
        address: '同庄#1线113',
        xt: '12.06',
        bw: '5.33',
        bw2: '5.33',
        desc: '荚变同瞪变门号主变10kV同庄1号线113通过10KV辰邦线111-O624开关传由上元变上元变/1号主变',
      }, {
        date: '通过',
        name: '10kV花邦线111-O6 24',
        address: '同庄#1线113',
        xt: '12.06',
        bw: '5.33',
        bw2: '5.33',
        desc: '荚变同瞪变门号主变10kV同庄1号线113通过10KV辰邦线111-O624开关传由上元变上元变/1号主变',
      },

      ],
      mytype_text: "纯负荷",
      DialogOption: {
        xAxis: {
          type: 'category',
          data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        legend: {
          top: "6%",
          type: "plain",
          data: ["下调能力", "日前安排",],
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            name: "下调能力",
            data: [2, 3, 4, 5, 4, 3, 2,],
            type: 'line',
            smooth: true
          },

        ]
      },
      DialogOption2: {
        xAxis: {
          type: 'category',
          data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        legend: {
          top: "6%",
          type: "plain",
          data: ["调节需求", "日前安排",],
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            name: "调节需求",
            data: [2, 3, 4, 5, 4, 3, 2,],
            type: 'line',
            smooth: true
          },
          {
            name: "日前安排",
            data: [5, 7, 8, 9, 6, 4, 2, 1,],
            type: 'line',
            smooth: true
          }
        ]
      },
      DialogOption3: {
        color: ["#ac984b", "#dd8b79", "#9579e0", "#5fb5b6", "#6fc5f2"],

        xAxis: {
          type: 'category',
          data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        legend: {
          top: "6%",
          type: "plain",
          data: ["限额*门槛", "预测值",],
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            name: "预测值",
            data: [2, 3, 4, 5, 4, 3, 2,],
            type: 'line',
            showSymbol: false, // 隐藏数据点

            smooth: true,
          },
          {
            name: "限额*门槛",
            data: [2, 3, 4, 5, 4, 3, 2,],
            type: 'line',
            color: "red",
            showSymbol: false, // 隐藏数据点
            smooth: true,
          },

        ]
      },

      AdjustPolicy: [
        {
          name: '网侧调整',
          title: '负荷转供',
          num: 0,
          num1: 0,
          num2: 0,
          num3: 0,
        },
        {
          name: '储能调整',
          title: '储能调整',
          num: 0,

          num1: 0,
          num2: 0,
          num3: 0,
        },
        {
          name: '电源调整',
          list:
            [
              {
                title: '非统调电源',
                num: 0,

                num1: 0,
                num2: 0,
                num3: 0,
              },
              {
                title: '统调电源',
                num: 0,

                num1: 0,
                num2: 0,
                num3: 0,
              },

            ]
        },
        {
          name: '负荷侧调整',
          list:
            [
              {
                title: '可调负荷调整',
                num: 0,

                num1: 0,
                num2: 0,
                num3: 0,
              },
              {
                title: '虚拟电厂调整',
                num: 0,

                num1: 0,
                num2: 0,
                num3: 0,
              },
              {
                title: '微电网调整',
                num: 0,

                num1: 0,
                num2: 0,
                num3: 0,
              },

            ]
        },
      ],
      underLineLeft: "10%",
      ZGtype: 1,


      dialogTableVisible: false,
      tableData: [{
        date: '无数据',
        name: '无数据',
        address: '无数据',
        xt: '无数据',
        bw: '无数据'
      }],

      timeLineData: [
        {
          time: '00:00',
          type: 1,
        },
        {
          time: '01:00',
          type: 1,
        },
        {
          time: '02:00',
          type: 1
        },
        {
          time: '03:00',
          type: 1,
        },
        {
          time: '04:00',
          type: 1,

        },
        {
          time: '05:00',
          type: 1,

        },
        {
          time: '06:00',
          type: 1,

        },
        {
          time: '07:00',
          type: 1,

        },
        {
          time: '08:00',
          type: 1,

        },
        {
          time: '09:00',
          type: 1,

        },
        {
          time: '10:00',
          type: 1,

        },
        {
          time: '11:00',
          type: 1,

        },
        {
          time: '12:00',
          type: 1,

        },
        {
          time: '13:00',
          type: 1,

        },

        {
          time: '14:00',
          type: 1,

        },
        {
          time: '15:00',
          type: 1,

        },
        {
          time: '16:00',
          type: 1,
        },
        {
          time: '17:00',
          type: 1,
        },

        {
          time: '18:00',
          type: 1,
        },
        {
          time: '19:00',
          type: 1,
        },
        {
          time: '20:00',
          type: 1,
        },

        {
          time: '21:00',
          type: 1,
        },
        {
          time: '22:00',
          type: 1,
        },
        {
          time: '23:00',
          type: 1,
        },
        {
          time: '24:00',
          type: 1,

        },

      ],

      lineImgData: [
        {
          text: '纯负荷',
          id: '',

          num: 0,
          img: "cfh",
          type: '',
          resourceType: 20,
          anName: '纯负荷',
        },
        {
          text: '储能',
          id: '',

          num: 0,
          type: '',
          resourceType: 6,
          anName: '储能',

        },
        {
          text: '非统调常规',
          id: '',

          num: 0,
          type: '',
          resourceType: 7,
          anName: '非统调电源',

        },

        {
          text: '统调小机',
          id: '',
          num: 0,
          type: '',
          resourceType: 18,
          anName: '统调低电压电源(统调小机组)',
        },
        {
          text: '集中式分布',
          id: '',

          num: 0,
          type: '',
          resourceType: 0,
          anName: '集中式分布',


        },

        {
          text: '分布式光伏',
          id: '',

          num: 0,
          type: '',
          resourceType: 14,
          anName: '分布式光伏',


        },

        {
          text: '可调负荷',
          id: '',

          num: 0,
          type: '',
          resourceType: 9,
          anName: '可调负荷',


        },
        {
          text: '虚拟电厂',
          id: '',

          num: 0,
          type: '',
          resourceType: 10,
          anName: '虚拟电厂',


        },
        {
          text: '微电网',
          id: '',

          num: 0,
          type: '',
          resourceType: 11,
          anName: '微电网',


        },
      ],

      phtzxgChart: undefined,
      phtzxgChartOption: {
        color: ["#ac984b", "#dd8b79", "#9579e0", "#5fb5b6", "#6fc5f2"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          top: "6%",
          type: "plain",
          data: ["限额*门槛", "基态潮流", "网侧调整", "储能调整", "电源调整", "负荷侧调整"],
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "限额*门槛",
            type: "line",
            data: [60, 60, 60, 60, 60, 60, 60],
            color: "red",
            showSymbol: false // 隐藏数据点

          },
          {
            name: "基态潮流",
            type: "line",
            data: [10, 60, 70, 100, 80, 40, 10],
            showSymbol: false // 隐藏数据点

          },
          {
            name: "网侧调整",
            type: "line",
            data: [10, 60, 70, 100, 80, 40, 10],
            showSymbol: false // 隐藏数据点
          },
          {
            name: "储能调整",
            type: "line",
            data: [10, 60, 50, 80, 75, 40, 10],
            showSymbol: false // 隐藏数据点

          },
          {
            name: "电源调整",
            type: "line",
            data: [10, 60, 40, 70, 65, 40, 10],
            showSymbol: false // 隐藏数据点

          },
          {
            name: "负荷侧调整",
            type: "line",

            data: [10, 60, 30, 60, 55, 40, 10],
            showSymbol: false // 隐藏数据点
          },
        ],
      },

    };
  },
  computed: {



    riNeiOrQian: {
      get() {
        return this.$store.state.home.riNeiOrQian;
      },
    },
    customTooltipText() {
      let hour = ("00" + Math.floor(Math.abs(this.sliderValue) / 4)).slice(-2);
      let mm = ("00" + (Math.abs(this.sliderValue) % 4) * 15).slice(-2);
      return `${hour}:${mm}`;
    },
  },
  watch: {
    riNeiOrQian: {
      //deep:true,//监听对象深度监听
      immediate: true, //立即监听
      handler(newVal, oldVal) {
        if (newVal == "rn") {
          this.timeLineList = mock.resource_timelineList_rn;
        } else if (newVal == "rq") {
          this.timeLineList = mock.resource_timelineList;
        }
      },
    },
  },
  created() {


    this.MENKAN = sessionStorage.getItem('MENKAN')

    this.ZWTWO = JSON.parse(sessionStorage.getItem('resouse_Message')).dev_id + "_1"
    this.PEIWANGTWO = JSON.parse(sessionStorage.getItem('resouse_Message')).dev_id + "_2"
    this.zhuwangSRC = this.ZWONE + this.ZWTWO + this.ALLUSE
    this.peiwangSRC = this.PEIWANGONE + this.PEIWANGTWO + this.ALLUSE

    console.log("转供前的地址", this.zhuwangSRC);
    console.log("转供后的地址", this.peiwangSRC);




    this.Yx_TYpe = sessionStorage.getItem('Yx_TYpe')

    // alert(this.Yx_TYpe)
    this.timeNow = this.getLast15Minutes(new Date());
    console.log(this.timeNow, '看一下当前时间')
    this.myName_zi = sessionStorage.getItem('Name_zi')
    this.requestParams = JSON.parse(sessionStorage.getItem('resouse_Message'))
    this.requestParams.dev_p = Number(this.requestParams.dev_p).toFixed(2)
    this.requestParams.dev_rate = Number(this.requestParams.dev_rate).toFixed(2)
    this.requestParams.dev_se = Number(this.requestParams.dev_se).toFixed(2)
    console.log(this.requestParams, '看一眼数据')
    // if (this.myName_zi == '上峰变#2主变.高' || this.myName_zi == '学景变1号主变.高') {
    //   this.lineImgData.forEach(it => {
    //     if (it.text == '可调负荷' || it.text == '虚拟电厂' || it.text == '微电网') {
    //       it.num = 0
    //     }
    //   })
    // }



    if (sessionStorage.getItem('DWLX')) {
      this.myPageType = sessionStorage.getItem('DWLX')
    }
    // this.initMychart2Optin()

    //调用接口的地方
    this.useMydtyx_analysisAdjustmentStrategy()
    //调整策略
    this.useMydtyx_adjustmentStrategy()

    this.usemynetSideAdjust()

    this.useMydtyx_timeAxis()
    // 调整策略需求曲线

    this.userMydtyx_strategy()
    this.useMydtyx_structuralDiagram() // 结构图
  },
  mounted() {
    //初始化时间标签
    const now = new Date();
    const hour = now.getHours();
    const minutes = now.getMinutes();
    this.sliderValue = Math.floor((hour * 60 + minutes) / 15);

    // alert(this.sliderValue)
    // alert(this.customTooltipTop)
  },
  methods: {

    handleSliderInput(val) {
      this.sliderValue = val;
      this.sliderPosition();
    },
    handleSliderChange(val) {
      //加载数据
      // this.mapInfo.time = this.customTooltipText;

      this.timeNow = this.customTooltipText;
      this.is_useTimeLine = true
      console.log(this.timeNow, '看时间');
      this.dtxqParams.isNowday = false
      this.dtxqParams.time = this.timeNow
      this.refreshChaoliuzhi()  //刷新负载率
      this.useMydtyx_structuralDiagramByTime()    // 结构图-时间轴
    },
    sliderPosition() {
      /*const tooltipPosition =
            ((Math.abs(this.sliderValue) / 96) * 100).toFixed(2)*/
      const tooltipPosition = (Math.abs(this.sliderValue) / 96) * 972; //因为el-slider的高度是720
      this.customTooltipTop = `calc(${tooltipPosition}px - 6px)`; //减去黑点的1/2高度
      this.showCustomTooltip = true;
    },


    handleClickzg(type) {
      this.ZGtype = type
    },
    jumpPage(type) {
      if (type == 1) {
        window.open('http://192.30.1.20:7088/osp/GraphPub/Navigator.html?graph=2024_09_03_08_58_22_zpw_pw_h_131132010000000127.auto.pic.g')
      }

    },
    //点击表格
    clickTableLine(it) {
      this.dtqxParams.id = it.id || '暂无id'
      this.useMyresourceUnitDiagram()
    },

    // 结构图
    useMydtyx_structuralDiagram() {
      let params = {
        id: this.requestParams.dev_id,
        day: this.requestParams.over_time.slice(0, 10)
      }
      dtyx_structuralDiagram(params).then(res => {
        if (res.code !== 200) return

        this.lineImgData.forEach(it => {
          res.data.forEach(et => {
            if (it.anName == et.resource_name) {
              it.num = et.value == 0 ? 0 : et.value.toFixed(2),
                it.type = et.resourceType
              it.id = et.id
            }
          })
        })
      })
    },

    // 结构图-时间轴
    useMydtyx_structuralDiagramByTime() {
      let params = {
        id: this.requestParams.dev_id,
        time: this.timeNow,
        day: this.requestParams.over_time.slice(0, 10)

      }
      dtyx_structuralDiagramByTime(params).then(res => {
        if (res.code !== 200) return

        this.lineImgData.forEach(it => {
          res.data.forEach(et => {
            if (it.anName == et.resource_name) {
              it.num = et.value == 0 ? 0 : et.value.toFixed(2)
              it.type = et.resourceType
              it.id = et.id
            }
          })
        })
      })
    },

    //单体详情
    useMy_resourceUnitDetail() {
      // this.tableData = []
      this.dtxqParams.day = this.requestParams.over_time.slice(0, 10)


      resourceUnitDetail(this.dtxqParams).then(res => {

        if (res.data.length == 0) {
          this.dtqxParams.id = '暂无id'
        } else {
          if (res.data.length !== 0) {
            res.data.forEach(it => {
              it.meritorious = Number(it.meritorious).toFixed(2)
              it.capacity = Number(it.capacity).toFixed(2)
              it.margin_down = Number(it.margin_down).toFixed(2)
              it.margin_up = Number(it.margin_up).toFixed(2)
            })
          }
          this.dtqxParams.id = res.data[0].id

        }
        this.tableData = res.data
        this.useMyresourceUnitDiagram() // 资源单体曲线图
      })
    },

    // 资源单体曲线图
    useMyresourceUnitDiagram() {
      this.dtqxParams.day = this.requestParams.over_time.slice(0, 10)

      resourceUnitDiagram(this.dtqxParams).then(res => {
        if (res.code !== 200) return

        let xArray = []
        let xd_Array = []
        res.data.forEach(it => {
          xArray.push(it.x)
          xd_Array.push((Number(it.y).toFixed(2)))
        })



        this.DialogOption.xAxis.data = xArray
        this.DialogOption.series[0].data = xd_Array

        this.DialogOption.series[0].name = this.downAD
        this.DialogOption.legend.data[0] = this.downAD

        this.initMydialogEcharts()
      })
    },

    // 时间轴颜色
    useMydtyx_timeAxis() {
      let params = {
        id: this.requestParams.dev_id
      }
      dtyx_timeAxis(params).then(res => {
        this.yxType = res.data[0].over_type
        if (res.code !== 200) return
        let myObject = res.data[0]
        delete myObject.dev_id;
        delete myObject.dev_name;
        delete myObject.dev_se;
        delete myObject.dev_p;
        delete myObject.threshold;
        delete myObject.over_type;
        console.log(myObject, 'myObject')
        let newData = []
        for (let k in myObject) {
          newData.push({
            name: k,
            type: myObject[k].split('_')[1] == 'yellow' ? 3 : 2
          })
        }
        console.log(newData, '看数组');
        newData.forEach(it => {
          this.timeLineData.forEach(et => {
            if (it.name == et.time) {
              et.type = it.type
            }
          })
        })
      })
    },
    usemynetSideAdjust() {
      this.adParams.deviceId = this.requestParams.dev_id
      netSideAdjust(this.adParams).then(res => {
        if (res.code !== 200) return
        res.data.forEach(it => {
          it.ovevalue = Number(it.ovevalue).toFixed(2)
          it.p_load = Number(it.p_load).toFixed(2)
        })
        this.wangceTableData = res.data
      })
    },
    //获取当前时间最接近的15分钟时间节点
    getLast15Minutes(currentTime) {
      if (!currentTime) {
        var time = new Date();
      }
      var time = new Date(currentTime); // 创建一个当前时间的副本
      // 获取当前时间的分钟数
      var minutes = time.getMinutes();
      // 计算上一个15分钟时间节点的分钟数
      var last15Minutes = Math.floor(minutes / 15) * 15;
      // 设置时间的分钟数为上一个15分钟时间节点的分钟数
      time.setMinutes(last15Minutes);
      time.setSeconds(0); // 确保秒数为0，避免误差
      var h = time.getHours();
      var m = time.getMinutes();
      if (m < 10) {
        m = "0" + m;
      }
      if (h < 10) {
        h = "0" + h;
      }
      return h + ":" + m;
    },
    //调整策略
    useMydtyx_adjustmentStrategy() {
      let params = {
        id: this.requestParams.dev_id,
        time: this.timeNow,
        day: this.requestParams.over_time.slice(0, 10)


      }
      dtyx_adjustmentStrategy(params).then(res => {
        if (res.code !== 200) return
        console.log(res.data, '调整策略');
        this.AdjustPolicy.forEach(it => {
          if (it.name == '网侧调整') {
            it.num = res.data.load.adjustAbility == '0' ? '—' : res.data.load.adjustAbility.toFixed(2)
            it.num1 = res.data.load.requirement == '0' ? '—' : res.data.load.requirement.toFixed(2)
            it.num2 = res.data.load.arranged == '0' ? '—' : res.data.load.arranged.toFixed(2)
            it.num3 = res.data.load.calculate == '0' ? '—' : res.data.load.calculate.toFixed(2)

            // it.num1 = res.data.load.requirement.toFixed(2)
            // it.num2 = res.data.load.arranged.toFixed(2)
            // it.num3 = res.data.load.calculate.toFixed(2)

          } else if (it.name == '储能调整') {
            it.num = res.data.cn.adjustAbility == '0' ? '—' : res.data.cn.adjustAbility.toFixed(2)

            it.num1 = res.data.cn.requirement == '0' ? '—' : res.data.cn.requirement.toFixed(2)
            it.num2 = res.data.cn.arranged == '0' ? '—' : res.data.cn.arranged.toFixed(2)
            it.num3 = res.data.cn.calculate == '0' ? '—' : res.data.cn.calculate.toFixed(2)

            // it.num = res.data.cn.adjustAbility.toFixed(2)

            // it.num1 = res.data.cn.requirement.toFixed(2)
            // it.num2 = res.data.cn.arranged.toFixed(2)
            // it.num3 = res.data.cn.calculate.toFixed(2)
          } else if (it.name == '电源调整') {
            it.list.forEach(et => {
              if (et.title == "非统调电源") {
                et.num = res.data.notTracking.adjustAbility == '0' ? '—' : res.data.notTracking.adjustAbility.toFixed(2)

                et.num1 = res.data.notTracking.requirement == '0' ? '—' : res.data.notTracking.requirement.toFixed(2)
                et.num2 = res.data.notTracking.arranged == '0' ? '—' : res.data.notTracking.arranged.toFixed(2)
                et.num3 = res.data.notTracking.calculate == '0' ? '—' : res.data.notTracking.calculate.toFixed(2)


                // et.num = res.data.notTracking.adjustAbility.toFixed(2)
                // et.num1 = res.data.notTracking.requirement.toFixed(2)
                // et.num2 = res.data.notTracking.arranged.toFixed(2)
                // et.num3 = res.data.notTracking.calculate.toFixed(2)
              } else {

                et.num = res.data.tracking.adjustAbility == '0' ? '—' : res.data.tracking.adjustAbility.toFixed(2)

                et.num1 = res.data.tracking.requirement == '0' ? '—' : res.data.tracking.requirement.toFixed(2)
                et.num2 = res.data.tracking.arranged == '0' ? '—' : res.data.tracking.arranged.toFixed(2)
                et.num3 = res.data.tracking.calculate == '0' ? '—' : res.data.tracking.calculate.toFixed(2)


                // et.num = res.data.tracking.adjustAbility.toFixed(2)

                // et.num1 = res.data.tracking.requirement.toFixed(2)
                // et.num2 = res.data.tracking.arranged.toFixed(2)
                // et.num3 = res.data.tracking.calculate.toFixed(2)
              }
            })
          } else if (it.name == '负荷侧调整') {
            it.list.forEach(et => {
              if (et.title == "可调负荷调整") {

                et.num = res.data.adjustLoad.adjustAbility == '0' ? '—' : res.data.adjustLoad.adjustAbility.toFixed(2)

                // et.num = res.data.adjustLoad.adjustAbility.toFixed(2)
                et.num1 = res.data.adjustLoad.requirement == '0' ? '—' : res.data.adjustLoad.requirement.toFixed(2)
                et.num2 = res.data.adjustLoad.arranged == '0' ? '—' : res.data.adjustLoad.arranged.toFixed(2)
                et.num3 = res.data.adjustLoad.calculate == '0' ? '—' : res.data.adjustLoad.calculate.toFixed(2)


                // et.num1 = res.data.adjustLoad.requirement.toFixed(2)
                // et.num2 = res.data.adjustLoad.arranged.toFixed(2)
                // et.num3 = res.data.adjustLoad.calculate.toFixed(2)
              } else if (et.title == "虚拟电厂调整") {


                et.num = res.data.virtualGrid.adjustAbility == '0' ? '—' : res.data.virtualGrid.adjustAbility.toFixed(2)

                et.num1 = res.data.virtualGrid.requirement == '0' ? '—' : res.data.virtualGrid.requirement.toFixed(2)
                et.num2 = res.data.virtualGrid.arranged == '0' ? '—' : res.data.virtualGrid.arranged.toFixed(2)
                et.num3 = res.data.virtualGrid.calculate == '0' ? '—' : res.data.virtualGrid.calculate.toFixed(2)

                // et.num = res.data.virtualGrid.adjustAbility.toFixed(2)

                // et.num1 = res.data.virtualGrid.requirement.toFixed(2)
                // et.num2 = res.data.virtualGrid.arranged.toFixed(2)
                // et.num3 = res.data.virtualGrid.calculate.toFixed(2)

              } else if (et.title == "微电网调整") {

                et.num = res.data.microGrid.adjustAbility == '0' ? '—' : res.data.microGrid.adjustAbility.toFixed(2)


                et.num1 = res.data.microGrid.requirement == '0' ? '—' : res.data.microGrid.requirement.toFixed(2)
                et.num2 = res.data.microGrid.arranged == '0' ? '—' : res.data.microGrid.arranged.toFixed(2)
                et.num3 = res.data.microGrid.calculate == '0' ? '—' : res.data.microGrid.calculate.toFixed(2)

                // alert('世界')
                // et.num = res.data.microGrid.adjustAbility.toFixed(2)

                // et.num1 = res.data.microGrid.requirement.toFixed(2)
                // et.num2 = res.data.microGrid.arranged.toFixed(2)
                // et.num3 = res.data.microGrid.calculate.toFixed(2)
                console.log(et, '看et')
              }
            })
          }
        })
      })
    },

    // 平衡调整结果
    useMydtyx_analysisAdjustmentStrategy() {
      let params = {
        id: this.requestParams.dev_id
      }
      console.log(params, '看params')
      dtyx_analysisAdjustmentStrategy(params).then(res => {
        if (res.code !== 200) return
        this.YXL_XE0 = (this.requestParams.dev_p - res.data.xe).toFixed(2)

        sessionStorage.setItem("YXL_XE0", this.YXL_XE0)

        console.log(params, '排查报错')
        //储能
        let xArray = []
        let xeArray = []
        let cnArray = []
        res.data.cntz.forEach(it => {
          xArray.push(it.x)
          xeArray.push(Number(res.data.xe).toFixed(2))

          cnArray.push(Number(it.y).toFixed(2))
        })
        this.phtzxgChartOption.xAxis[0].data = xArray
        this.phtzxgChartOption.series[3].data = cnArray
        this.phtzxgChartOption.series[0].data = xeArray

        //电源
        let dyArray = []
        res.data.dytz.forEach(it => {
          dyArray.push(Number(it.y).toFixed(2))
        })
        this.phtzxgChartOption.series[4].data = dyArray
        //负荷
        let fhArray = []
        res.data.fhtz.forEach(it => {
          fhArray.push(Number(it.y).toFixed(2))
        })
        this.phtzxgChartOption.series[5].data = fhArray
        //基态
        let jtArray = []
        res.data.jtcl.forEach(it => {

          if (it.x == this.requestParams.over_time.slice(11, 16)) {
            this.timeString = Number(it.y).toFixed(2)
          }

          if (it.x == this.timeNow) {
            this.timeString2 = Number(it.y).toFixed(2)
          }

          jtArray.push(Number(it.y).toFixed(2))
        })
        this.phtzxgChartOption.series[1].data = jtArray
        // this.timeString = 
        //网侧
        let wcArray = []
        res.data.wctz.forEach(it => {
          wcArray.push(Number(it.y).toFixed(2))
        })
        // console.log(wcArray , 'wcArraywcArray')
        this.phtzxgChartOption.series[2].data = wcArray
        console.log(this.phtzxgChartOption.series[1].data, 'wcArraywcArray')
        this.initMychart2Optin()
        // this.phtzxgChartOption.xAxis[0].data = xArray
        // console.log(xArray, cnArray , '看数据')
        // alert('世界')
      })
    },


    // 刷新调整结果
    refreshChaoliuzhi() {
      let params = {
        id: this.requestParams.dev_id
      }
      dtyx_analysisAdjustmentStrategy(params).then(res => {
        if (res.code !== 200) return
        //基态
        res.data.jtcl.forEach(it => {
          if (it.x == this.timeNow) {
            this.timeString = Number(it.y).toFixed(2)
            this.YXL_XE = (Number(it.y) - res.data.xe).toFixed(2)
          }
        })
      })
    },

    //单个基态越限
    JTaloneRefrash() {
      let params = {
        id: this.requestParams.dev_id
      }
      dtyx_analysisAdjustmentStrategy(params).then(res => {
        if (res.code !== 200) return
        //基态
        let jtArray = []
        let xArray = []

        let xeArray = []
        res.data.jtcl.forEach(it => {
          jtArray.push((it.y).toFixed(2))
          xeArray.push(Number(res.data.xe).toFixed(2))
          xArray.push(it.x)
        })

        this.DialogOption3.series[0].data = jtArray
        this.DialogOption3.series[1].data = xeArray
        this.DialogOption3.xAxis.data = xArray
        this.initMyJTDialogEcharts()

      })
    },

    userMydtyx_strategy() {

      this.tjqvParams.id = this.requestParams.dev_id

      console.log(this.tjqvParams, '看曲线参数')

      dtyx_strategy(this.tjqvParams).then(res => {
        if (res.code !== 200) return
        console.log(res.data, '这个是返回值')

        let xArray = []
        let needArray = []
        let rqArray = []

        res.data.need.forEach(it => {
          xArray.push(it.x)
          needArray.push(Number(it.y).toFixed(2))
        })
        res.data.anpai.forEach(it => {
          rqArray.push(Number(it.y).toFixed(2))
        })

        this.DialogOption2.xAxis.data = xArray
        this.DialogOption2.series[0].data = needArray
        this.DialogOption2.series[1].data = rqArray
        this.initMyCnDialogEcharts()
      })
    },


    initMyCnDialogEcharts() {
      this.$nextTick(() => {
        const chartDom = this.$refs.chuNendialogEchartsRef
        const myChart = echarts.init(chartDom)
        myChart.setOption(this.DialogOption2)
      })
    },


    initMyJTDialogEcharts() {
      this.$nextTick(() => {
        const chartDom = this.$refs.jitaidialogEchartsRef
        const myChart = echarts.init(chartDom)
        myChart.setOption(this.DialogOption3)
      })
    },



    openCnDialogEvt(type) {
      this.chuNendialogVisible = true
      this.tjqvParams.resource_type = type
      this.userMydtyx_strategy()
    },
    openFhdialog() {
      this.wangcedialogVisible = true
    },

    // 生成 min 到 max 之间的随机整数
    getRandomInt(min, max) {
      return ((Math.random() * (max - min + 1)) + min).toFixed(2);
    },

    // 点击时间轴触发的方法
    TimeLineChangeEvt(item, current) {
      this.is_useTimeLine = true

      this.timeNow = (item.time).slice(0, 3) + current
      console.log(this.timeNow, '看时间');

      this.dtxqParams.isNowday = false
      this.dtxqParams.time = this.timeNow


      this.refreshChaoliuzhi()  //刷新负载率
      this.useMydtyx_structuralDiagramByTime()    // 结构图-时间轴


    },

    jumpBus() {
      this.jitaidialogVisible = true
      this.JTaloneRefrash()
    },
    openDialogEvt(et) {

      if (et.resourceType == '9' || et.resourceType == '11') {
        this.dtqxParams.curve_type = '2'
        this.downAD = '下调能力'

      } else {
        this.dtqxParams.curve_type = '1'
        this.downAD = '上调能力'
      }
      console.log(et, '999999999')
      this.mytype_text = et.text
      //这里添加曲线和表格的接口
      if (et.anName == '纯负荷') {
        this.dtqxParams.id = et.id
        this.dtqxParams.type = 20
        this.dialogTableVisible = true
        this.downAD = '纯负荷'

        this.useMyresourceUnitDiagram() // 资源单体曲线图
        return
      }

      this.dtxqParams.id = et.id
      this.dtxqParams.type = et.resourceType
      this.dtqxParams.type = et.resourceType

      this.dialogTableVisible = true
      this.useMy_resourceUnitDetail() // 资源单体详情
      // this.useMyresourceUnitDiagram() // 资源单体曲线图
      // this.initMydialogEcharts()

    },


    initMydialogEcharts() {
      this.$nextTick(() => {
        const chartDom = this.$refs.diaLogEcharRef
        const myChart = echarts.init(chartDom)
        myChart.setOption(this.DialogOption)
      })

    },

    initMychart2Optin() {
      this.$nextTick(() => {
        const chartDom = this.$refs.phtzxg
        const myChart = echarts.init(chartDom)
        myChart.setOption(this.phtzxgChartOption)
      })
    },


    // goDidiao() {
    //   this.$emit("redirect", "business", "didiao");
    // },

  },
  components: {},
};
</script>

<style scoped lang="scss">
::v-deep .el-popover {
  z-index: 9999 !important;

}


::v-deep .el-tabs--top .el-tabs__item.is-top:last-child,
.el-tabs--top .el-tabs__item.is-bottom:last-child,
.el-tabs--bottom .el-tabs__item.is-top:last-child,
.el-tabs--bottom .el-tabs__item.is-bottom:last-child {
  padding-right: 20px;
}

::v-deep .el-tabs--top .el-tabs__item.is-top:last-child,
.el-tabs--top .el-tabs__item.is-bottom:last-child,
.el-tabs--bottom .el-tabs__item.is-top:last-child,
.el-tabs--bottom .el-tabs__item.is-bottom:first-child {
  padding-left: 20px;
}

::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2),
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
  padding-left: 20px;
}

::v-deep .v-modal {
  z-index: -2002 !important;
  display: none !important;

}

// ::v-deep .el-tabs--top .el-tabs__item.is-top:last-child, .el-tabs--top .el-tabs__item.is-bottom:last-child, .el-tabs--bottom .el-tabs__item.is-top:last-child, .el-tabs--bottom .el-tabs__item.is-bottom:last-child {
//    padding-right: 0; 
// }
.main-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  .wangceDialgo {
    width: 100%;
    height: 200px;
  }

  .tabs_ZG {
    width: 100%;
    height: 100%;
    background: url(./policyImg/zhuangong.png) no-repeat;
    background-size: 100% 100%;
    width: 1130px;
    height: 500px;
  }


  .outDiaBox {
    position: absolute;
    width: 988px;
    height: 502px;
    top: 100px;
    background: url(./policyImg/dialogOut.png) no-repeat;
    z-index: 9999;

    .inBox {
      width: 927px;
      height: 401px;
      background: url(./policyImg/inZiyuan2.png) no-repeat;
      box-sizing: 100% 100%;
      margin: auto;
      margin-top: 70px;
      position: relative;

      .img {
        position: absolute;
        right: 20px;
        cursor: pointer;
      }

      .title {
        font-size: 18px;
        color: #00706b;
        font-weight: 600;
        text-indent: 50px;
        padding-top: 7px;
        box-sizing: border-box;
      }

      .tabBox {
        width: calc(100% - 40px);
        margin: 0 auto;
        margin-top: 20px;
      }

      .title2box {
        background: url(./policyImg/diaTitle2.png) no-repeat;
        height: 40px;
        margin-top: 20px;
        font-size: 18px;
        color: #00706b;
        font-weight: 600;
        text-indent: 50px;
        padding-top: 7px;

        box-sizing: border-box;
      }

      .diaLogEchart {
        width: 100%;
        height: 190px;
      }


    }
  }
}

.container_left {
  margin: auto;
  width: 1030px;
  height: 915px;
  // background-image: url(./policyImg/fzjc_left.png);
  background: url(./policyImg/zk.png);
  // background-position: -23px -58px;
  // background-repeat: no-repeat;
  padding: 0px 10px;
  box-sizing: border-box;
  background-size: 100%;
  position: relative;

  .bottomLine {
    margin-top: 100px;
    width: 1011px;
    height: 50px;
    background: url(./policyImg/bottomLine.png) no-repeat top center;
    display: flex;
    justify-content: space-between;
    position: relative;

    .underTimeLine {
      width: 61px;
      height: 86px;
      position: absolute;
      z-index: 999;
      top: 13px;
      background: url(./policyImg/underTimeLine.png) no-repeat;
      background-size: 100% 100%;
      cursor: pointer;

    }


    .greyBox {
      width: 38px;
      height: 100%;

      .boll {
        height: 60%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        // background: linear-gradient(to bottom, #eea6ba9e, #f0dae578), ;

        .cnBoll {
          background-color: grey;
          width: 8px;
          height: 8px;
          margin-top: 5px;
          border-radius: 50%;
        }
      }

      .boll2 {
        background: linear-gradient(to bottom, #eea6ba9e, #f0dae578), ;
      }

      .boll3 {
        background: linear-gradient(to bottom, #eee427d8, #eee42732), ;
      }

      .time {
        height: 40%;
        width: 100%;
        border-radius: 4px;
        background-color: #dfe6e9;
        border: 1px solid #c4c7c8;
        font-size: 13px;
        text-align: center;
        line-height: 18px;
        cursor: pointer;
      }
    }
  }

  .title {
    width: 944px;
    height: 79px;
    margin: 0 auto;
    background: url(./policyImg/titleBk.png);
    margin-top: 30px;

    .top {
      height: 50%;
      margin: auto;
      width: calc(100% - 20px);
      border-bottom: 1px dashed #6bcee2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;

      .left {

        display: flex;

        div {
          height: 22px;
          line-height: 22px;
          color: red;
          font-weight: 600;
        }

        .img {
          width: 23px;
          height: 22px;
          background: url(./policyImg/-h-icon.png);
          margin-right: 8px;
        }


      }

      .center {
        display: flex;
        align-items: center;

        .img2 {
          // background: url(../../../assets/images/icon-bottom.png) no-repeat;
          background-size: 100% 100%;
          // width: 18px;
          // height: 18px;
        }

        ;

        .img3 {
          // width: 18px;
          // height: 18px;
          // background: url(../../../assets/images/icon-top.png) no-repeat;
          background-size: 100% 100%;
        }

      }

    }

    .bottom {

      height: 50%;
      margin: auto;
      width: calc(100% - 20px);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;
        width: 750px;

        div {
          width: 237px;
          text-align: center;
          font-weight: 600;
        }

        .fuzai {
          width: 580px;
          display: flex;
          align-items: center;
          margin-left: 10px;

          .lv {
            width: 20px;
            color: red;
          }

          ::v-deep .el-progress {
            width: 185px;

          }

          ::v-deep .el-icon-circle-close {
            display: none
          }
        }


      }

      .right {
        width: 38px;
        height: 15px;
        background: url(./policyImg/detail.png) no-repeat;
        cursor: pointer;

      }
    }
  }

  .content {
    height: 229px;
    width: 100%;
    background: url(./policyImg/zu2.png) no-repeat center;
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .text {
      margin-left: 260px;
    }

    .line {
      position: absolute;
      top: 212px;
      left: 504px;
      height: 40px;
      width: 2px;
      border: 1px dashed gray;
    }
  }

  .contentKx {
    background: url(./policyImg/kx2.png) no-repeat center;
  }



  .content2 {
    box-sizing: border-box;
    margin-top: 24px;
    padding-left: 1px;
    height: 229px;
    width: 100%;
    display: flex;


    .small {
      width: 188px;
      height: 100%;
      border-top: 2px dashed gray;
      text-align: center;
      cursor: pointer;

      .small_Line {
        height: 100px;
        width: 1px;
        border: 1px dashed gray;
        margin: 0 auto;
      }

      .text {
        text-align: center;
        margin: 8px 0px;
        // font-size: 14px;
      }

      .num {
        margin: auto;
        width: 90px;
        background: #deeff7db;
        color: #25aafe;
        width: 60px;
        height: 22px;
        line-height: 22px;
      }
    }

  }

}

.container_right {
  width: 754px;

  .top {
    width: 100%;
    height: 454px;
    background-image: url(./policyImg/fzjc_right.png);
    background-size: 100%;

    .title {
      line-height: 34px;
      color: #00706b;
      font-size: 18px;
      font-weight: bold;
      margin-left: 48px;
    }

    .tzcl {
      width: 100%;
      position: relative;

      .head {
        width: 389px;
        height: 31px;
        position: absolute;
        top: -40px;
        right: 0;
        margin-top: 10px;
        display: flex;
        justify-content: space-around;

        div {
          background-image: url(./policyImg/ploy-label.png);
          background-repeat: no-repeat;
          background-size: 100%;
          text-align: center;
          width: 124px;
          height: 24px;
          font-size: 14px;
          margin: 0 2px;
          font-weight: bold;
        }
      }

      .body {
        margin-top: 55px;
        // display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 20px;
        box-sizing: border-box;

        .conten_line {
          width: 100%;
          margin: auto;
          display: flex;
          align-items: center;

          .leftBox {
            width: 161px;
            height: 40px;
            background: url(./policyImg/blueDi.png) no-repeat;
            text-align: center;
            line-height: 40px;
          }

          .arrBox {
            width: 47px;
            height: 40px;
            background: url(./policyImg/arrayRight.png) no-repeat;

          }

          .danHang {

            background: url(./policyImg/dHang.png) no-repeat center bottom;
            background-size: 100%;
            padding-bottom: 10px;
            box-sizing: border-box;

            .conBox {
              width: 518px;
              height: 32px;
              display: flex;
              padding-right: 40px;
              box-sizing: border-box;
              align-content: center;
            }

            div {
              width: 39%;
              height: 45px;
              text-align: center;
              line-height: 45px;

            }
          }

          .danHang2 {
            background: url(./policyImg/dangHang2.png) no-repeat center bottom;
            ;
            background-size: 100%;
          }

          .danHang3 {
            background: url(./policyImg/danHang3.png) no-repeat center bottom;
            ;
            background-size: 100%;
          }
        }

        .xxArray {
          width: 14px;
          margin-left: 70px;
          height: 24px;
          background: url(./policyImg/xxarray.png) no-repeat;
        }

      }
    }
  }

  .bottom {
    width: 100%;
    height: 454px;
    margin-top: 10px;
    background-image: url(./policyImg/fzjc_right.png);

    .title {
      line-height: 34px;
      color: #00706b;
      font-size: 18px;
      font-weight: bold;
      margin-left: 48px;
    }

    #phtzxg {
      padding-left: 20px;
      height: 400px;
    }
  }
}





.textBox {
  height: 33px;
  padding-left: 30px;
  box-sizing: border-box;
  font-size: 14px;
  width: 331px;
}

// ::v-deep .el-progress-bar__outer {
//   background: #c1e0dd !important;
// }

::v-deep .el-progress.is-success .el-progress-bar__inner {
  background: linear-gradient(to right, #e5f1f2, #408d95) !important;
}

::v-deep .el-icon-circle-check:before {
  content: "";
  display: none;
}

::v-deep .el-slider.is-vertical .el-slider__runway {
  width: 6px;
  height: 100%;
  margin: 0 16px;
  background-color: transparent;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}

::v-deep .el-slider.is-vertical .el-slider__bar {
  width: 6px;
  height: auto;
  border-radius: 0 0 3px 3px;
  background-color: transparent;
}

::v-deep .el-slider__button {
  width: 150px;
  height: 30px;
  //border: solid 2px #000;
  //background-color: #000;
  //border-radius: 50%;
  border: none;
  border-radius: 0;
  background-color: transparent;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}



.myslider {
  width: 972px;
  height: 60px;
  position: absolute;

  left: 20px;
  top: 0;
  z-index: 10;
  opacity: 0.2;
}

.mytooltip {
  position: absolute;
  z-index: 2;
  top: -46px;
  width: 50px;
  height: 66px;
  line-height: 30px;
  background: url(./policyImg/currenttime-bg2.png) center no-repeat;
  // background: url(./);
  // background: url(../../../assets/images/currenttime-bg.png);
  // background: url(../policy/policyImg/cur);
  background-size: 100% 100%;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  // background-color: red;
  // margin-left: -6px;
}

::v-deep .el-slider__button-wrapper {
  top: -66px;
  transform: translateX(-74%);
}

::v-deep .el-slider.is-vertical .el-slider__runway {
  width: 100%;
  height: 6px;
  margin: 16px 0;
  background-color: transparent;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}

::v-deep .el-slider__bar {
  width: 100%;
  height: 6px;
  border-radius: 0 0 3px 3px;
  background: none !important;
}

::v-deep .el-slider__button {
  width: 55px;
  height: 66px;
  //border: solid 2px #000;
  //background-color: #000;
  //border-radius: 50%;
  border: none;
  border-radius: 0;
  background-color: transparent;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
